<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Planner</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input, select, textarea {
            width: 100%;
            padding: 5px;
            margin-top: 5px;
        }
        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Event Planner</h1>
    <form id="eventForm">
        <label for="eventTitle">Event Title:</label>
        <input type="text" id="eventTitle" required>

        <label for="eventDescription">Event Description:</label>
        <textarea id="eventDescription" rows="3"></textarea>

        <label for="eventLocation">Event Location (optional):</label>
        <input type="text" id="eventLocation">

        <label for="eventDate">Date:</label>
        <input type="date" id="eventDate" required>

        <label for="eventTime">Time:</label>
        <input type="time" id="eventTime" required>

        <label for="timezone">Timezone:</label>
        <select id="timezone" required>
            <option value="America/New_York">Eastern Time</option>
            <option value="America/Chicago">Central Time</option>
            <option value="America/Denver">Mountain Time</option>
            <option value="America/Los_Angeles">Pacific Time</option>
            <option value="America/Anchorage">Alaska Time</option>
            <option value="Pacific/Honolulu">Hawaii-Aleutian Time</option>
        </select>

        <button type="submit">Create Event</button>
    </form>

    <div id="result"></div>

    <script>
        document.getElementById('eventForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const title = document.getElementById('eventTitle').value;
            const description = document.getElementById('eventDescription').value;
            const location = document.getElementById('eventLocation').value;
            const date = document.getElementById('eventDate').value;
            const time = document.getElementById('eventTime').value;
            const timezone = document.getElementById('timezone').value;

            const eventDateTime = moment.tz(`${date} ${time}`, timezone);
            const now = moment();
            const duration = moment.duration(eventDateTime.diff(now));

            const days = Math.floor(duration.asDays());
            const hours = duration.hours();
            const minutes = duration.minutes();

            const googleCalendarUrl = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&details=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}&dates=${eventDateTime.format('YYYYMMDDTHHmmss')}/${eventDateTime.format('YYYYMMDDTHHmmss')}&ctz=${encodeURIComponent(timezone)}`;

            const resultHtml = `
                <h2>Event Details:</h2>
                <p><strong>Title:</strong> ${title}</p>
                <p><strong>Description:</strong> ${description}</p>
                <p><strong>Location:</strong> ${location || 'N/A'}</p>
                <p><strong>Date and Time:</strong> ${eventDateTime.format('MMMM D, YYYY h:mm A')} (${timezone})</p>
                <p><strong>Time until event:</strong> ${days} days, ${hours} hours, and ${minutes} minutes</p>
                <p><strong>Add to Google Calendar:</strong> <a href="${googleCalendarUrl}" target="_blank">Click here</a></p>
                <p>Or copy this URL:</p>
                <textarea readonly rows="3" style="width: 100%;">${googleCalendarUrl}</textarea>
            `;

            document.getElementById('result').innerHTML = resultHtml;
        });
    </script>
</body>
</html>
